<template>
	<view class="content fofa">
		<tabnav title="银行卡认证" :col="back"></tabnav>
		<view class="dis disAl box1 bacFFF wid100" style="height: 120rpx;position: fixed;z-index: 9999;">
			<view class="wid100 dis disJuC">
				<block v-for="(item,index) in stepList" :key="index">
					<view class="item-state" :class="index != 0?'mar-30':''">
						<image class="state-img" :src="getImg(index)"></image>
						<view class="textCen foSi20 mar-top10" :style="{color: step >= index ? back:'#B5B4B4'}">{{item.name}}</view>
					</view>
					<view class="line mar-30" :style="{background: step > index ? back:'#B5B4B4'}"
						v-if="index < stepList.length-1"></view>
				</block>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="wid90 mar" v-if="(step == 1 || step == 0)">
			<view class="foSi40 fowe600" style="margin-top: 43rpx;">上传身份证</view>
			<view class="mar-top20 foSi20" style="color: #B5B4B4;">请上传身份证原件，确保照片清晰、四角完整</view>
			<view class="dis disAl disJuB" style="margin-top: 43rpx;">
				<image v-if="!renImage" src="https://www.sign.run/applet/static/attestation/renxiang.png" @click="upImage(1)" 
				style="width: 300rpx;height: 250rpx;" class="borRad10"></image>
				<image v-if="renImage" :src="renImage" @click="upImage(1)"
				style="width: 300rpx;height: 250rpx;" class="borRad10"></image>
				<image v-if="!huoImage" src="https://www.sign.run/applet/static/attestation/guowei.png" @click="upImage(2)"
				style="width: 300rpx;height: 250rpx;" class="borRad10"></image>
				<image v-if="huoImage" :src="huoImage" @click="upImage(2)"
				style="width: 300rpx;height: 250rpx;" class="borRad10"></image>
			</view>
		</view>
		<view class="wid90 mar" v-if="step == 1">
			<view class="foSi40 fowe600" style="margin-top: 43rpx;">核实证件信息</view>
			<view class="mar-top20 foSi20" style="color: #B5B4B4;">证件信息已自动读取，您可更正读取内容</view>
			<view class="hei80 dis disAl disJuB foSi30 mar-top30">
				<view>姓名</view>
				<input v-model="name" type="text" style="text-align: end;" placeholder="请输入姓名"/>
			</view>
			<view class="xia"></view>
			<view class="hei80 dis disAl disJuB foSi30 mar-top20">
				<view>身份证号</view>
				<input v-model="numberID" type="idcard" style="text-align: end;color: #B8B7B7;" placeholder="请输入身份证号"/>
			</view>
			<view class="xia"></view>
			<view class="hei80 dis disAl disJuB foSi30 mar-top20">
				<view>手机号</view>
				<input v-model="tel" type="tel" style="text-align: end;color: #B8B7B7;" placeholder="请输入手机号"/>
			</view>
			<view class="xia"></view>
			<view class="hei80 dis disAl disJuB foSi30 mar-top20">
				<view>银行卡号</view>
				<input v-model="bankCard" type="digit" style="text-align: end;color: #B8B7B7;" placeholder="请输入本人的银行卡号"/>
			</view>
			<view class="xia"></view>
		</view>
		
		<view v-if="step == 2">
			<view class="dis disJuC" style="margin-top: 69rpx;">
				<image src="https://www.sign.run/applet/static/attestation/tongguo.png" style="width: 232rpx;height: 183rpx;"></image>
			</view>
			<view class="textCen foSi40 fowe600" style="margin-top: 82rpx;">认证已通过</view>
			<view class="textCen foSi25" style="color: #B5B4B4;margin-top: 56rpx;">
				<view>恭喜您，您的实名认证已通过！</view>
				<view>已为您申请了数字证书，现在即可签署合同。</view>
			</view>
			<view class="wid90 mar dis disAl disJuC coFFF hei80 foSi35 borRad10" @click="queding(2)"
			style="margin-top: 90rpx;" :style="'background-color: '+back+';'">确定</view>
		</view>
		<view style="height: 160rpx;"></view>
		<view v-if="step != 2" class="wid100 dis disAl disJuC bacFFF" style="height: 140rpx;bottom: 0;position: fixed;">
			<view class="wid80 dis disAl disJuC coFFF hei80 foSi35 borRad10" @click="xiayibu"
				:style="'background-color: '+back+';'">下一步</view>
		</view>
	</view>
</template>
<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				back: uni.getStorageSync('back'),
				step: 0,
				checked: 'https://www.sign.run/applet/static/attestation/wancheng.png',
				 stepList: [{
					name: '上传身份证',
					checkedImg: 'https://www.sign.run/applet/static/attestation/one.png',
					unCheckedImg: 'https://www.sign.run/applet/static/attestation/one.png',
					id: 1
				}, {
					name: '核实并填写信息',
					checkedImg: 'https://www.sign.run/applet/static/attestation/two.png',
					unCheckedImg: 'https://www.sign.run/applet/static/attestation/two1.png',
					id: 2
				}, {
					name: '完成认证',
					checkedImg: 'https://www.sign.run/applet/static/attestation/three.png',
					unCheckedImg: 'https://www.sign.run/applet/static/attestation/three1.png',
					id: 3
				}], //步骤列表
				renImage: '',
				huoImage: '',
				name: '',
				numberID:'',
				tel:'',
				bankCard: ''
			}
		},
		onLoad() {
		},
		methods: {
			queding(index){
				if(index == 1){
					this.fasong = false
				}else{
					uni.navigateBack()
				}
			},
			xiayibu(){
				if(this.step == 0){
					if(!this.renImage || !this.huoImage){
						return uni.showToast({
							title: "请上传图片",
							icon: 'error',
							duration: 2000
						})
					}
				}else if(this.step == 1){
					if(!this.name){
						return uni.showToast({
							title: "请输入姓名",
							icon: 'error',
							duration: 2000
						})
					}
					if(!this.numberID){
						return uni.showToast({
							title: "请输入身份证号",
							icon: 'error',
							duration: 2000
						})
					}
					if(!this.tel){
						return uni.showToast({
							title: "请输入电话号码",
							icon: 'error',
							duration: 2000
						})
					}
					if(!this.bankCard){
						return uni.showToast({
							title: "请输入银行卡号",
							icon: 'error',
							duration: 2000
						})
					}
				}
				this.step++
			},
			//获取图片
			getImg(e) {
				let index = Number(e)
				if (this.step > index) return this.checked
				if (this.step == index) return this.stepList[index].unCheckedImg
				return this.stepList[index].checkedImg
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
			upImage(index) {
				var that = this
				uni.chooseImage({
					count: 1, //上传图片的数量，默认是9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths; //拿到选择的图片，是一个数组
						if(index == 1){
							that.renImage = res.tempFilePaths[0]; //拿到选择的图片，是一个数组
						}else{
							that.huoImage = res.tempFilePaths[0]; //拿到选择的图片，是一个数组
						}
					}
				});
			},
			shangchuan(tempFilePaths, index) {
				var that = this
				uni.uploadFile({
					url: that.global.url + '/api/common/upload',
					header: {
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths[0],
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							that.image = apiresult.data.url
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon: 'error',
							duration: 2000
						})
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
	}
	.item-state{
		z-index: 10;
		width: 170rpx;
	}
	.state-img {
		width: 30rpx;
		height: 30rpx;
		display: flex;
		margin: auto;
	}
	.line {
		width: 181rpx;
		margin-top: 15rpx;
		height: 4rpx;
	}
	.mar-30{
		margin-left: -85rpx;
	}
	.xia{
		height: 1rpx;
		background: #E0E0DF;
	}
</style>
